//webpack的配置文件
//修改默认的入口出口
const { VueLoaderPlugin } = require('vue-loader')
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
module.exports = {
    mode: 'production',
    entry: './src/main.js',
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js',
    },
    // resolve: { // ** 引入vue文件时需要更改vue文件指向 ** 对这里有疑问的可以去看看 node_modules/vue/dist/README.md 里面的这个文件有说明
    //     alias: {
    //         'vue$': 'vue/dist/vue.esm.js',
    //         '@': 'src'
    //     }
    // },
    plugins: [
        new HtmlWebpackPlugin({ template: './public/index.html' }),
        new MiniCssExtractPlugin(),
        new VueLoaderPlugin()
    ],
    module: {
        rules: [
            { // 一个具体的规则对象
                test: /\.css$/i, // 匹配.css结尾的文件
                use: ["style-loader", MiniCssExtractPlugin.loader, "css-loader"], // 让webpack使用者2个loader处理css文件
                // 从右到左的, 所以不能颠倒顺序
                // css-loader: webpack解析css文件-把css代码一起打包进js中
                // style-loader: css代码插入到DOM上 (style标签)
            },
            {
                test: /\.less$/i,
                use: [
                    // compiles Less to CSS
                    'style-loader',
                    'css-loader',
                    'less-loader',
                ],
            },
            { // 图片文件的配置(仅适用于webpack5版本)
                test: /\.(gif|png|jpg|jpeg)/,
                type: 'asset' // 匹配上面的文件后, webpack会把他们当做静态资源处理打包
                // 如果你设置的是asset模式
                // 以8KB大小区分图片文件
                // 小于8KB的, 把图片文件转base64, 打包进js中
                // 大于8KB的, 直接把图片文件输出到dist下
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                type: 'asset/resource', // 所有的字体图标文件, 都输出到dist下
                generator: { // 生成文件名字 - 定义规则
                    filename: 'fonts/[name].[hash:6][ext]' // [ext]会替换成.eot/.woff
                }
            },
            {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/, // 不去匹配这些文件夹下的文件
                use: {
                    loader: 'babel-loader', // 使用这个loader处理js文件
                    options: { // 加载器选项
                        presets: ['@babel/preset-env'] // 预设: @babel/preset-env 降级规则-按照这里的规则降级我们的js语法
                    }
                }
            },
            {
                test: /\.vue$/,
                use: ['vue-loader']
            }
        ],
    },
    devServer: {
        port: 3000,
        open: true,
    },
}